<template>
  <div class="leftbuttombox" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var chartDom = document.querySelector(".leftbuttombox");
    var myChart = echarts.init(chartDom); 
    var option;

    option = {
      title: {
        text: "大洲感染总人数饼状图",
        textAlign: "center", //  居中对齐
        left: "50%", //  标题水平位置
        textStyle: {
          fontSize: "10",
          color: "#ffffff",
          // 字体加粗
          fontWeight: "normal",
        },
      },

      tooltip: {
        trigger: "item",
      },
      legend: {
        bottom: 0,
        left: "center",
      },
      grid: {
        top: "30%",
        left: "15%",
        right: "10%",
        bottom: "10%",
      },
      color: ["#ff7f7f", "#1089e7"],
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          
          
          data: [
            { value: 70, name: "北美洲" },
            { value: 500, name: "欧洲" },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
</style>